<template>
  <div
    style="
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      background-color: #081d51;
      background-size: 100% 100%;
      background-position: center;
      background-repeat: no-repeat;
    "
    :style="{
      backgroundImage: `url(${require('../assets/背景@2x.png')})`,
    }"
  >
    <el-container style="height: 100%; padding: 70px 70px">
      <el-aside
        id="asideBar"
        width="200px"
        style="display: flex; justify-content: center; align-items: center"
      >
        <div
          style="
            width: 90%;
            height: 98%;
            display: flex;
            flex-direction: column;
            border: solid #0066a8 5px;
          "
        >
          <div
            style="
              width: 100%;
              height: 100px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-bottom: solid #0066a8 2px;
              flex-shrink: 0;
            "
          >
            <img
              src="../assets/logo.png"
              style="width: 50px; height: 50px"
              alt=""
            />
            <div style="font-size: 15px; margin-left: 5px; color: #fff">
              深工集控toolBox
            </div>
          </div>
          <div
            style="
              width: 100%;

              overflow: auto;
              scrollbar-width: none;
              -ms-overflow-style: none;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <div
              @mouseenter="mouseenterSystem(index)"
              @mouseleave="mouseleaveSystem"
              v-for="(item, index) in systemList"
              :key="index"
              style="
                width: 80%;
                height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;
                flex-shrink: 0;
                cursor: pointer;
              "
              :style="{
                background:
                  selectSystem == index
                    ? 'linear-gradient( to bottom,#1666D9 10%,#1A4A9B 90%, #1666D9 100%)'
                    : null,
              }"
            >
              <img
                style="width: 20px; height: 20px"
                :src="'http://' + resourceIp + ':8094/' + item.systemPhoto"
                alt=""
              />
              <div
                style="
                  color: white;
                  width: 50px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                "
              >
                {{ item.systemName }}
              </div>
            </div>
          </div>
        </div>
      </el-aside>
      <el-container
        style="display: flex; flex-direction: column; justify-content: center"
      >
        <div
          style="
            height: 98%;
            width: 99%;
            border: solid #0066a8 5px;
            display: flex;
            flex-direction: column;
          "
        >
          <div
            style="
              width: 100%;
              height: 80px;
              display: flex;
              align-items: center;
              border-bottom: solid 2px #0066a8;
              justify-content: space-between;
            "
          >
            <div style="display: flex; align-items: center; margin-left: 10px">
              <img
                src="../assets/首页@2x.png"
                style="width: 25px; height: 25px"
                alt=""
              />
              <div style="color: #fff; margin-left: 5px">主页</div>
            </div>
            <div style="display: flex; align-items: center"></div>
          </div>
          <div
            style="width: 100%; flex: 1; display: flex; flex-direction: column"
          >
            <div
              style="
                width: 100%;
                display: flex;
                align-items: center;
                margin-top: 30px;
              "
            >
              <div
                style="
                  display: flex;
                  align-items: center;
                  width: 350px;
                  height: 50px;
                  margin-left: 30px;
                "
              >
                <div
                  style="
                    flex: 8;
                    height: 100%;
                    background: yellow;
                    border-radius: 20px 0 0 20px;

                    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
                    display: flex;
                    align-items: center;
                    border: solid #409eff 2px;
                    border-right: 0;
                  "
                  :style="{
                    background:
                      'linear-gradient(to right bottom,#1a57b9,#2473e3,#1d57b9)',
                  }"
                >
                  <img
                    src="../assets/搜索.png"
                    style="width: 30px; height: 30px; margin-left: 10px"
                    alt=""
                  />
                  <input
                    v-model="inputForSearch"
                    type="text"
                    placeholder="输入名称快速定位系统"
                    style="
                      color: #c5c5c5;
                      background-color: transparent;
                      border: 0;
                      outline: 0;
                      flex: 1;
                      margin: 0 10px;
                    "
                  />
                </div>
                <div
                  @click="searchSystemsByName"
                  style="
                    flex: 2;
                    height: 100%;
                    border-radius: 0 20px 20px 0;
                    border: solid #409eff 2px;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #fff;
                    cursor: pointer;
                  "
                  :style="{
                    background:
                      'linear-gradient(to right bottom,#2473e3,#1a57b9, #2473e3)',
                  }"
                >
                  搜索
                </div>
              </div>
              <div
                @click="openShowAddSystem"
                style="
                  height: 50px;
                  width: 150px;
                  border-radius: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  border: solid #409eff 2px;
                  margin-left: 20px;
                  cursor: pointer;
                "
                :style="{
                  background:
                    'linear-gradient( to right bottom,#1a57b9,#2473e3,#1d57b9)',
                }"
              >
                +
                <div style="margin-left: 10px">添加系统</div>
              </div>
              <!-- <div
                style="
                  margin-left: 20px;
                  height: 50px;
                  width: 150px;

                  border-radius: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  cursor: pointer;
                "
                :style="{
                  background:
                    'linear-gradient(to right bottom,#653458,#7c5378,#653458)',
                }"
              >
                <img
                  src="../assets/删除.png"
                  style="width: 20px; height: 20px; margin-right: 10px"
                  alt=""
                />
                删除系统
              </div> -->
            </div>
            <div
              style="color: white; width: 100%; text-align: left; margin: 30px"
            >
              选择系统进入
            </div>
            <div
              style="
                width: calc(100% - 60px);
                flex: 1;
                display: flex;
                flex-wrap: wrap;
                margin: 0 30px;
              "
            >
              <div
                @mouseenter="mouseenterSystem(index)"
                @mouseleave="mouseleaveSystem"
                v-for="(item, index) in systemList"
                :key="index"
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  cursor: pointer;
                  width: 200px;
                  height: 190px;
                "
              >
                <div
                  @click="gotoSystem(index)"
                  style="
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    padding: 5px;

                    border-radius: 5px;
                    align-items: center;
                  "
                  :style="{
                    background:
                      selectSystem == index
                        ? 'linear-gradient(to right,#2959ac, #28549b,#2959ac)'
                        : '#13418C',
                    border:
                      'solid 2px ' +
                      (selectSystem == index ? '#DAF0FF' : '#127DC6'),
                  }"
                >
                  <img
                    :src="'http://' + resourceIp + ':8094/' + item.systemPhoto"
                    style="width:90%; height: 100px; border-radius: 5px"
                    alt=""
                  />
                  <div
                    style="
                      width: 100%;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      color: white;
                      margin-top: 5px;
                    "
                  >
                    {{ item.systemName }}
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    width: 100%;
                    margin-top: 10px;
                  "
                >
                  <div
                    style="
                      height: 30px;
                      flex: 1;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      color: white;
                      border-radius: 5px;
                      cursor: pointer;
                    "
                    @click="gotoSystem(index)"
                    :style="{
                      background:
                        selectSystem == index
                          ? 'linear-gradient(to right bottom,#1a57b9,#2473e3,#1d57b9)'
                          : '#0A4995',
                      border:
                        'solid 2px ' +
                        (selectSystem == index ? '#c7e1f7' : '#0A4995'),
                    }"
                  >
                    进入系统
                  </div>
                  <img
                    @click="openEditSystem(index)"
                    src="../assets/编辑1.png"
                    style="width: 30px; height: 30px"
                    alt=""
                  />
                  <img
                    @click="deleteSystem(index)"
                    src="../assets/删除.png"
                    style="width: 30px; height: 30px"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-container>
    </el-container>
    <!-- 弹窗start -->
    <el-dialog
      title="提示"
      :visible.sync="showAddSystem"
      width="70%"
      custom-class="tree-cesium-container"
    >
      <div
        style="
          width: 99%;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
        "
      >
        <div
          style="
            width: 100%;
            color: white;
            padding: 10px 0;
            background: #2664d5;
          "
        >
          新增系统
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            height: 30px;
            margin-top: 2px;
          "
        >
          <div
            style="
              flex: 2;
              height: 100%;
              background: #2664d5;
              display: flex;
              justify-content: center;
              align-items: center;
              color: white;
            "
          >
            系统名称
          </div>
          <div
            style="
              flex: 8;
              height: 100%;
              background: #2664d5;
              margin-left: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <input
              v-model="tSystem.systemName"
              type="text"
              style="
                width: 98%;
                height: 85%;
                background: #17479c;
                color: white;
                border: 0;
              "
            />
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            height: 30px;
            margin-top: 2px;
          "
        >
          <div
            style="
              flex: 2;
              height: 100%;
              background: #2664d5;
              display: flex;
              justify-content: center;
              align-items: center;
              color: white;
            "
          >
            系统地址
          </div>
          <div
            style="
              flex: 8;
              height: 100%;
              background: #2664d5;
              margin-left: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <input
              v-model="tSystem.systemAddress"
              type="text"
              style="
                width: 98%;
                height: 85%;
                background: #17479c;
                color: white;
                border: 0;
              "
            />
          </div>
        </div>
        <div
          style="
            width: 100%;
            display: flex;
            align-items: center;
            height: 100px;
            margin-top: 2px;
          "
        >
          <div
            style="
              flex: 2;
              height: 100%;
              background: #2664d5;
              display: flex;
              justify-content: center;
              align-items: center;
              color: white;
            "
          >
            系统图标
          </div>
          <div
            style="
              flex: 8;
              height: 100%;
              background: #2664d5;
              margin-left: 2px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <input
              style="display: none"
              type="file"
              id="photoInputForOtherSystem"
              accept="image/*"
              @change="uploadPhotoForOtherSystem"
            />
            <button
              @click="clickPhotoInputForOtherSystem"
              style="background: #3a6dbd; color: white"
            >
              点击上传
            </button>
            <img
              v-if="tSystem.systemPhoto"
              :src="'http://' + resourceIp + ':8094/' + tSystem.systemPhoto"
              style="width: 50px; height: 50px"
              alt=""
            />
          </div>
        </div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        "
      >
        <div
          @click="submitAddOtherSystem"
          style="
            cursor: pointer;
            color: white;
            padding: 5px 35px;

            border-radius: 10px;
            border: solid 2px #409eff;
            cursor: pointer;
          "
          :style="{
            background:
              'linear-gradient(to right bottom,#1a57b9,#2473e3,#1d57b9)',
          }"
        >
          确认
        </div>
        <div
          @click="showAddSystem = false"
          style="
            cursor: pointer;
            color: white;
            padding: 5px 35px;
            margin-left: 20px;
            border-radius: 10px;
            border: solid 2px #409eff;
            cursor: pointer;
          "
          :style="{
            background:
              'linear-gradient(to right bottom,#1a57b9,#2473e3,#1d57b9)',
          }"
        >
          取消
        </div>
      </div>
    </el-dialog>
    <!-- 弹窗end -->
  </div>
</template>
<script>
import eventBus from "../util/myEventBus";
import request from "../axios/request";
export default {
  data() {
    return {
      inputForSearch: null,
      tSystem: {
        systemName: null,
        systemAddress: null,
        systemPhoto: null,
      },
      restHeight1: null,
      showAddSystem: false,
      resourceIp: null,
      systemList: null,
      selectSystem: null,
    };
  },
  beforeDestroy() {
    eventBus.$off("getAllSystems");
    eventBus.$off("searchSystemsByName");
    eventBus.$off("deleteSystem");
    eventBus.$off("openEditSystem");
    eventBus.$off("submitAddOtherSystem");
  },
  mounted() {
    this.resourceIp = this.extractIPFromURL(window.location.origin);
    console.log(this.resourceIp);
    this.getAllSystems();
    eventBus.$on("getAllSystems", this.getAllSystems);
    eventBus.$on("searchSystemsByName", this.searchSystemsByName);
    eventBus.$on("deleteSystem", this.deleteSystem);
    eventBus.$on("openEditSystem", this.openEditSystem);
    eventBus.$on("submitAddOtherSystem", this.submitAddOtherSystem);
  },
  methods: {
    async searchSystemsByName() {
      this.$store.state.lastMethod = "searchSystemsByName";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/otherSystem/api/searchSystemsByName",
        method: "POST",
        data: this.inputForSearch,
      });
      if (res.data.status == 200) {
        this.systemList = res.data.data;
       
      }
    },
    async deleteSystem(index) {
      this.$store.state.lastMethod = "deleteSystem";
      this.$store.state.lastData = index;
      let res = await request({
        url: "/otherSystem/api/deleteSystemById/" + this.systemList[index].id,
        method: "DELETE",
      });
      if (res.data.status == 200) {
         this.$store.state.checkedPassword = "true";
        this.getAllSystems();
       
      }
    },
    async openEditSystem(index) {
      this.$store.state.lastMethod = "openEditSystem";
      this.$store.state.lastData = index;
      let res = await request({
        url: "/otherSystem/api/getSystemById/" + this.systemList[index].id,
        method: "GET",
      });
      if (res.data.status == 200) {
        this.tSystem = res.data.data;
       
      }
      this.showAddSystem = true;
    },
    gotoSystem(index) {
      window.location.href = this.systemList[index].systemAddress;
    },
    mouseleaveSystem() {
      this.selectSystem = null;
    },
    mouseenterSystem(index) {
      this.selectSystem = index;
    },
    async getAllSystems() {
      this.$store.state.lastMethod = "getAllSystems";
      this.$store.state.lastData = null;
      let res = await request({
        url: "/otherSystem/api/getAllSystems",
        method: "GET",
      });
      if (res.data.status == 200) {
        this.systemList = res.data.data;
       
      }
    },
    extractIPFromURL(url) {
      // 定义正则表达式来匹配IP地址
      const ipRegex = /(?:\d{1,3}\.){3}\d{1,3}/;

      // 使用正则表达式查找匹配项
      const match = url.match(ipRegex);

      // 返回匹配到的IP地址（如果有的话）
      return match ? match[0] : null;
    },

    async uploadPhotoForOtherSystem(event) {
      let file = event.target.files[0];
      if (file) {
        let formData = new FormData();
        formData.append("file", file);
        let res = await request({
          url: "/file/api/upload/" + this.resourceIp,
          method: "POST",
          data: formData,
        });
        if (res.data.status == 200) {
          console.log("上传成功");
          this.tSystem.systemPhoto = res.data.data;
          event.target.value = "";
        }
      }
    },
    clickPhotoInputForOtherSystem() {
      let photoInputForOtherSystem = document.getElementById(
        "photoInputForOtherSystem"
      );
      photoInputForOtherSystem.click();
    },
    async submitAddOtherSystem() {
      this.$store.state.lastMethod = "submitAddOtherSystem";
      this.$store.state.lastData = null;
      let res = null;
      if (this.tSystem.id == null) {
        res = await request({
          url: "/otherSystem/api/submitNewSystem",
          method: "POST",
          data: this.tSystem,
        });
      } else {
        res = await request({
          url: "/otherSystem/api/updateSystemById",
          method: "POST",
          data: this.tSystem,
        });
      }
      if (res.data.status == 200) {
         this.$store.state.checkedPassword = "true";
        this.getAllSystems();
      }
    },
    openShowAddSystem() {
      this.tSystem = {
        systemName: null,
        systemAddress: null,
        systemPhoto: null,
      };
      this.showAddSystem = true;
    },
  },
};
</script>
<style>
.tree-cesium-container {
  background: #144383 !important;
}

.tree-cesium-container .el-dialog__header {
  display: none;
}

.tree-cesium-container .el-dialog__body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>